<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入样式 -->
  <link rel="stylesheet" href="../../plugins/element-ui/index.css" />
  <link rel="stylesheet" href="../../styles/common.css" />
  <link rel="stylesheet" href="../../styles/page.css" />
  <style>
    #member-app  .notAdmin::after{
      border: 0 !important;

    }
  </style>
</head>
<body>
  <div class="dashboard-container" id="member-app">
    <div class="container">
      <div class="tableBar">
<!--        搜索按钮-->
        <el-input
          v-model="input"
          placeholder="请输入员工姓名"
          style="width: 250px"
          clearable
           @keyup.enter.native="handleQuery"
        >
          <i slot="prefix"
            class="el-input__icon el-icon-search"
            style="cursor: pointer"
            @click="handleQuery"
          ></i><!--搜索放大镜，handleQuery在156行定义了-->
        </el-input>
        <el-button
          type="primary"
          @click="addMemberHandle('add')"
        ><!--調用了155行的addMemberHandle()-->
          + 添加员工
        </el-button>

      </div><!--tableData是用来绑定模型数据的，在145行把数据给他，就可以由el-ui这个table组件自动展示列表数据（不用管怎么实现的）-->
      <el-table
        :data="tableData"
        stripe
        class="tableBox">
          <!-- :data="tableData"：这里使用了 Vue.js 中的数据绑定语法，将名为 tableData 的数据
          对象绑定到表格组件的 data 属性上。这样可以将数据传递给表格组件进行展示。-->
          <!-- stripe：这是 Element UI 表格组件的一个属性，用于给表格的行添加斑马纹样式，以增加可读性。-->
        <el-table-column
          prop="name"
          label="员工姓名"
        ></el-table-column>
        <el-table-column
          prop="username"
          label="账号"
        ></el-table-column>
        <el-table-column
          prop="phone"
          label="手机号"
        ></el-table-column>
        <el-table-column label="账号状态"><!--去掉 <template>这一块，在左边>左边加上prop="status"展示原数据1/0-->
          <template slot-scope="scope"><!--固定用法，插槽-->
<!--slot-scope="scope" 是定义插槽作用域的部分。它告诉 Vue.js 在这个插槽中使用一个名为 "scope" 的作用域对象来访问父组件传递的数据。-->
<!--换句话说，当父组件向子组件传递数据并使用插槽时，可以在这个 <template> 中使用 scope 对象来访问这些数据，以便在子组件中进行处理或显示。-->
            {{ String(scope.row.status) === '0' ? '已禁用' : '正常' }}<!--动态地拿到循环出来的这一行数据的状态位，判断。。。-->
          </template><!--每个column代表一列-->
<!-- 因为 Element UI 的表格组件在循环渲染数据时，会将每一行的数据传递给 scope.row。这样，-->
<!--            你就可以直接在模板中使用 scope.row 来访问当前行的数据，而不需要额外的操作。-->
        </el-table-column>
        <el-table-column
          label="操作"
          width="160"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              class="blueBug"
              @click="addMemberHandle(scope.row.id)"
              :class="{notAdmin:user !== 'admin'}">
              编辑
            </el-button><!--scope.row是员工管理的一条数据所封装成的json对象-->
            <el-button
              type="text"
              size="small"
              class="delBut non"
              @click="statusHandle(scope.row)"
              v-if="user === 'admin'"
            ><!--user在135行定义并赋值了，如果是admin用户，就可以看到禁用和启用按钮-->
              {{ scope.row.status == '1' ? '禁用' : '启用' }}
            </el-button>
          </template>
        </el-table-column>
      </el-table>
<!--      分页条，"[10, 20, 30, 40]"是下拉框，默认显示（第一个）10条-->
      <el-pagination
        class="pageList"
        :page-sizes="[2]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="counts"
        :current-page.sync="page"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination><!--current-change页码变化时执行handleCurrentChange方法，在200行-->
    </div>
  </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="../../plugins/vue/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="../../plugins/element-ui/index.js"></script>
    <!-- 引入axios -->
    <script src="../../plugins/axios/axios.min.js"></script>
    <script src="../../js/request.js"></script>
    <script src="../../api/member.js"></script>
    <script>
      new Vue({//
        el: '#member-app',
        data() {
          return {
             input: '',
             counts: 0,
             page: 1,//默认值
             pageSize: 2,//默认初始显示10条
             tableData : [],
             id : '',
             status : '',
          }
        },
        computed: {},
        created() {//当vue对象创建完成之后，页面初始化的时候就会自动调created()方法    // alert(1716274087595335682)
//vue内置的生命周期函数(钩子函数)当vue对象创建完之后，就会自动的调用（有一些方法，当需要页面或vue创建完之后执行，这时就把代码写在create()这个函数里面去
          this.init()//自定义的方法//init里的getMemberList()发送请求//调用其里面的getMemberList()作分页查询
          if(localStorage.getItem('userInfo') !=null){//完成员工登录之后，后端给服务端响应回来当前登录用户的信息，当时调用了localStorage.setItem()把用户信息存到浏览器里面
           //!=null说明取到了，之后转成json,根据json来解析，再从json里取username
            this.user = JSON.parse(localStorage.getItem('userInfo')).username
          }//取到之后，赋给vue里的模型数据user,在87行使用来判断是否是admin用户
        },
        mounted() {
        },
        methods: {
          async init () {
            const params = {//构造了一个对象，提交相应的参数(page和pageSize)到EmployeeController.java里的Page方法
              page: this.page,
              pageSize: this.pageSize,
              name: this.input ? this.input : undefined
            }//调用getMemberList()，其已经封装到member.js文件里
            //后端响应回来之后就要执行then这个回调函数
            await getMemberList(params).then(res => {//getMemberList(params)作用：发送ajax请求(ctrl+点击getMemberList())，then后面接收服务端响应的数据res
              if (String(res.code) === '1') {//code=1,服务端处理成功了
                this.tableData = res.data.records || []
//45行用tableData来绑定模型数据 //前端要这么拿数据，那么响应回来的数据就要符合这个要求(有records有total),
// 所以EmployeeController.java里的接收发送请求和参数的方法(R<Page>)的R的泛型应该是page
                this.counts = res.data.total//counts展示总的条数
              }
            }).catch(err => {
              this.$message.error('请求出错了：' + err)
            })
          },
          handleQuery() {//在35行调用了
            this.page = 1;//重新按第一页查
            this.init();//init()里的getMemberList()方法重新发送ajax请求,ctrl+点击getMemberList可以跳到ajax请求发送地
          },
           // 添加
          addMemberHandle (st) {
            if (st === 'add'){
              window.parent.menuHandle({//controller点击menuHandle
                id: '2',
                url: '/backend/page/member/add.html',//backend里的index.html里205行的menuHandle，把iframeUrl切换成指定的Url
                name: '添加员工'
              },true)
            } else {
              window.parent.menuHandle({
                id: '2',
                url: '/backend/page/member/add.html?id='+st,
                name: '修改员工'
              },true)
            }
          },
          //状态修改
          statusHandle (row) {//86行调用了//一点击“禁用”按钮，就执行这个方法
            this.id = row.id
            this.status = row.status
              alert(this.id)
              alert(this.status)
            this.$confirm('确认调整该账号的状态?', '提示', {//element-ui提供的方法，用来弹确认框
              'confirmButtonText': '确定',
              'cancelButtonText': '取消',
              'type': 'warning'
              }).then(() => {//点'确定'按钮，就会执行.then(
              enableOrDisableEmployee({ 'id': this.id, 'status': !this.status ? 1 : 0 }).then(res => {//ctrl+点击enableOrDisableEmployee，可以看到ajax请求，res是响应
                console.log('enableOrDisableEmployee',res)//发请求，如果“this.status”是0的，!this.status为1，它将“status”设置为1，否则，它将“状态”设置为0。
                if (String(res.code) === '1') {
                  this.$message.success('账号状态更改成功！')
                  this.handleQuery()
                }
              }).catch(err => {
                this.$message.error('请求出错了：' + err)
              })
            })
          },
          handleSizeChange (val) {
            this.pageSize = val
            this.init()
          },//                页码  传过来
          handleCurrentChange (val) {
            this.page = val//把定义的模型数据设置成相应的页码
            this.init()//重新发请求
          }
        }
      })
    </script>
</body>
</html>